<template>
  <div class="home">
    <vuedraggable class="wrapper" v-model="list">
      <transition-group class="sortbox">
          <dl v-for="(item, index) in list" :key="index" class="imgbox">
            <dt><img :src="item.url" alt="" srcset=""></dt>
            <dd>{{item.title}}</dd>
          </dl>
      </transition-group>
    </vuedraggable>



  </div>
</template>

<script>
// @ is an alias to /src
import vuedraggable from 'vuedraggable';



export default {
  name: 'home',
  components: {
    vuedraggable
  },
  updated() {
    console.log(this.list);
  },
  data() {
    return {
      list: [
        {
          title: 'aaa',
          url: "http://fed.rtmap.com/crm/images/aaa.png"
        },
        {
          title: 'bbb',
          url: "http://fed.rtmap.com/crm/images/bbb.png"
        },
        {
          title: 'ccc',
          url: "http://fed.rtmap.com/crm/images/ccc.png"
        },
        {
          title: 'ddd',
          url: "http://fed.rtmap.com/crm/images/eee.png"
        },
        {
          title: 'fff',
          url: "http://fed.rtmap.com/crm/images/fff.png"
        },
        {
          title: 'eee',
          url: "http://fed.rtmap.com/crm/images/eee.png"
        },
      ]
    }
  },
}
</script>
<style lang="css" scoped>
.sortbox{
  display: flex;
}
.imgbox{
  width: 100px;
  height: 120px;
}
.imgbox img{
  width: 100px;
  height: 100px;
}
</style>
